<script setup>
//1.外部资源,组件类
import Table from './components/table.vue'
import {
  Search,
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { ref, reactive, onMounted } from 'vue'
//2.定义props

//3.数据定义setup
const name = ref('')
const sex = ref('')
const date = ref('')
const SexList = reactive([{ type: 1, label: '男' }, { type: 2, label: '女' }])
const tableData = reactive([
  { date: '2016-05-03', name: 'Tom', sex: 1 },
  { date: '2016-05-02', name: 'Tom', sex: 1 },
  { date: '2016-05-04', name: 'Tom', sex: 1 },
  { date: '2016-05-01', name: 'Tom', sex: 2 },
  { date: '2016-05-03', name: 'Tom', sex: 1 },
  { date: '2016-05-02', name: 'Tom', sex: 1 },
  { date: '2016-05-04', name: 'Tom', sex: 1 },
  { date: '2016-05-01', name: 'Tom', sex: 2 },
  { date: '2016-05-03', name: 'Tom', sex: 1 },
  { date: '2016-05-02', name: 'Tom', sex: 1 },
  { date: '2016-05-04', name: 'Tom', sex: 1 },
  { date: '2016-05-01', name: 'Tom', sex: 2 },
  { date: '2016-05-03', name: 'Tom', sex: 1 },
  { date: '2016-05-02', name: 'Tom', sex: 1 },
  { date: '2016-05-04', name: 'Tom', sex: 1 },
  { date: '2016-05-01', name: 'Tom', sex: 2 },
  { date: '2016-05-03', name: 'Tom', sex: 1 },
  { date: '2016-05-02', name: 'Tom', sex: 1 },
  { date: '2016-05-04', name: 'Tom', sex: 1 },
  { date: '2016-05-01', name: 'Tom', sex: 2 },
  { date: '2016-05-03', name: 'Tom', sex: 1 },
  { date: '2016-05-02', name: 'Tom', sex: 1 },
  { date: '2016-05-04', name: 'Tom', sex: 1 },
  { date: '2016-05-01', name: 'Tom', sex: 2 },
])

//4.函数类

function editLine(idx) {
  ElMessage.success('你点击了' + idx)
}

function delLine(idx) {
  tableData.splice(idx, 1)
}
//5.页面生命周期类

onMounted(() => {
  console.log('2321')
})

</script>

<template>
  <div class="comon_container">
    <header class="common_header">
      样列标题
    </header>
    <main class="common_main">
      <div class="flex-wrap search_box">
        <div class="flex search_item flex-align">
          <div class="search_label">姓名：</div>
          <el-input style="width:220px;" v-model="name" placeholder="请输入姓名" />
        </div>
        <div class="flex search_item flex-align">
          <div class="search_label">年龄：</div>
          <el-input style="width:220px;" v-model="sex" placeholder="请输入年龄" />
        </div>
        <div class="flex search_item flex-align">
          <div class="search_label">出生日期：</div>
          <el-input style="width:220px;" v-model="date" placeholder="请输入出生日期" />
        </div>
        <div class="flex search_item flex-align">
          <el-button :icon="Search" type="primary">查询</el-button>
        </div>
      </div>
      <!-- table -->
      <div class="table_box">
        <Table :tableData="tableData" @editLine='editLine' @delLine="delLine"></Table>
      </div>
    </main>
  </div>
</template>
